<template>
	<div class="ozonizerBox">
		<div class="titleBox">
			<div class="btnbox">
				<el-button style="background-color:#2998b6;color: #000;border: 1px solid #2998b6; width: 80px;"
					@click="goBack">返 回</el-button>
			</div>
			<div class="title">
				鸿科碳素焙烧车间制氧数据采集
			</div>
		</div>
		<div class="bottomBox">
			<div class="bottomBox_left">
				<div class="ow">
					<div class="ow_left">
						<div class="titleName">1#臭氧机数据</div>
						<div class="listbox">
							<div class="item">
								<div class="itemName">出气温度</div>
								<div class="itemNum">{{showList.oxygen_machine_1_outlet_temp}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">出水温度</div>
								<div class="itemNum">{{showList.oxygen_machine_1_outlet_water_temp}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">工作压力</div>
								<div class="itemNum">{{showList.oxygen_machine_1_work_pressure}} <span class="unit"> MPa</span></div>
							</div>
							<div class="item">
								<div class="itemName">出气流量</div>
								<div class="itemNum">{{showList.oxygen_machine_1_outlet_flow}}<span class="unit"> Nm³/h</span></div>
							</div>
							<div class="item">
								<div class="itemName">臭氧功率</div>
								<div class="itemNum">{{showList.oxygen_machine_1_ozone_power}} <span class="unit"> KW</span></div>
							</div>
							<div class="item">
								<div class="itemName">臭氧浓度</div>
								<div class="itemNum">{{showList.oxygen_machine_1_ozone_concentration}} <span class="unit"> mg/L</span></div>
							</div>
							<div class="item">
								<div class="itemName">电源温度</div>
								<div class="itemNum">{{showList.oxygen_machine_1_power_supply_temp}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">臭氧泄露</div>
								<div class="itemNum">{{showList.oxygen_machine_1_ozone_leak}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">氧气泄露</div>
								<div class="itemNum">{{showList.oxygen_machine_1_oxygen_leak}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">露 点</div>
								<div class="itemNum">{{showList.oxygen_machine_1_dew_point}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">机柜温度</div>
								<div class="itemNum">{{showList.oxygen_machine_1_cabinet_temp}} <span class="unit"> ℃</span></div>
							</div>
						</div>
					</div>
					<div class="ow_right">
						<div class="titleName">2#臭氧机数据</div>
						<div class="listbox">
							<div class="item">
								<div class="itemName">出气温度</div>
								<div class="itemNum">{{showList.oxygen_machine_2_outlet_temp}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">出水温度</div>
								<div class="itemNum">{{showList.oxygen_machine_2_outlet_water_temp}}<span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">工作压力</div>
								<div class="itemNum">{{showList.oxygen_machine_2_work_pressure}}<span class="unit"> MPa</span></div>
							</div>
							<div class="item">
								<div class="itemName">出气流量</div>
								<div class="itemNum">{{showList.oxygen_machine_2_outlet_flow}} <span class="unit"> Nm³/h</span></div>
							</div>
							<div class="item">
								<div class="itemName">臭氧功率</div>
								<div class="itemNum">{{showList.oxygen_machine_2_ozone_power}}<span class="unit"> KW</span></div>
							</div>
							<div class="item">
								<div class="itemName">臭氧浓度</div>
								<div class="itemNum">{{showList.oxygen_machine_2_ozone_concentration}} <span class="unit"> mg/L</span></div>
							</div>
							<div class="item">
								<div class="itemName">电源温度</div>
								<div class="itemNum">{{showList.oxygen_machine_2_power_supply_temp}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">臭氧泄露</div>
								<div class="itemNum">{{showList.oxygen_machine_2_ozone_leak}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">氧气泄露</div>
								<div class="itemNum">{{showList.oxygen_machine_2_oxygen_leak}} <span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">露 点</div>
								<div class="itemNum">{{showList.oxygen_machine_2_dew_point}}<span class="unit"> ℃</span></div>
							</div>
							<div class="item">
								<div class="itemName">机柜温度</div>
								<div class="itemNum">{{showList.oxygen_machine_2_cabinet_temp}} <span class="unit"> ℃</span></div>
							</div>
						</div>
					</div>
				</div>
				<div class="thr">
					<div class="titleName">3#臭氧机数据</div>
					<div class="listbox">
						<div class="item">
							<div class="itemName">出气温度</div>
							<div class="itemNum">{{showList.oxygen_machine_3_outlet_temp}} <span class="unit"> ℃</span></div>
						</div>
						<div class="item">
							<div class="itemName">出水温度</div>
							<div class="itemNum">{{showList.oxygen_machine_3_outlet_water_temp}} <span class="unit"> ℃</span></div>
						</div>
						<div class="item">
							<div class="itemName">工作压力</div>
							<div class="itemNum">{{showList.oxygen_machine_3_work_pressure}} <span class="unit"> MPa</span></div>
						</div>
						<div class="item">
							<div class="itemName">出气流量</div>
							<div class="itemNum">{{showList.oxygen_machine_3_outlet_flow}} <span class="unit"> Nm³/h</span></div>
						</div>
						<div class="item">
							<div class="itemName">臭氧功率</div>
							<div class="itemNum">{{showList.oxygen_machine_3_ozone_power}} <span class="unit"> KW</span></div>
						</div>
						<div class="item">
							<div class="itemName">臭氧浓度</div>
							<div class="itemNum">{{showList.oxygen_machine_3_ozone_concentration}} <span class="unit"> mg/L</span></div>
						</div>
						<div class="item">
							<div class="itemName">电源温度</div>
							<div class="itemNum">{{showList.oxygen_machine_3_power_supply_temp}} <span class="unit"> ℃</span></div>
						</div>
						<div class="item">
							<div class="itemName">臭氧泄露</div>
							<div class="itemNum">{{showList.oxygen_machine_3_ozone_leak}} <span class="unit"> ℃</span></div>
						</div>
						<div class="item">
							<div class="itemName">氧气泄露</div>
							<div class="itemNum">{{showList.oxygen_machine_3_oxygen_leak}} <span class="unit"> ℃</span></div>
						</div>
						<div class="item">
							<div class="itemName">露 点</div>
							<div class="itemNum">{{showList.oxygen_machine_3_dew_point}} <span class="unit"> ℃</span></div>
						</div>
						<div class="item">
							<div class="itemName">机柜温度</div>
							<div class="itemNum">{{showList.oxygen_machine_3_cabinet_temp}} <span class="unit"> ℃</span></div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottomBox_right">
				<div class="itemBox">
					<div class="item">
						<div class="itemName">1#制氧机 </div>
						<div class="numBox">
							<div class="numItem">
								<div class="numName">运行状态</div>
								<div class="num">
									<div class="cirle " :class="[showList.oxygen_machine_1_run_flag ? 'green' : 'red' ]"></div>
								</div>
							</div>
							<div class="numItem">
								<div class="numName">1#仪表风压力</div>
								<div class="num">{{showList.oxygen_machine_1_instrument_air_pressure}}<span class="unit">Mpa</span></div>
							</div>
							<div class="numItem">
								<div class="numName">1#氧气纯度</div>
								<div class="num">{{showList.oxygen_machine_1_oxygen_purity}}<span class="unit">mg/L</span></div>
							</div>
							<div class="numItem">
								<div class="numName">1#产品罐压力</div>
								<div class="num">{{showList.oxygen_machine_1_product_tank_pressure}} <span class="unit">Mpa</span></div>
							</div>
							<div class="numItem">
								<div class="numName">1#冷却后温度</div>
								<div class="num">{{showList.oxygen_machine_1_cooled_temp}} <span class="unit">℃</span></div>
							</div>
							<div class="numItem">
								<div class="numName">1#流量</div>
								<div class="num">{{showList.oxygen_machine_1_flow_rate}} <span class="unit">Nm³/h</span></div>
							</div>
							<div class="numItem">
								<div class="numName">1#增压机</div>
								<div class="num">
									<div class="cirle" :class="[showList.oxygen_machine_1_boost_status ?  'green':'red' ]"></div>
								</div>
							</div>


						</div>
					</div>
					<div class="item">
						<div class="itemName">2#制氧机 </div>
						<div class="numBox">
							<div class="numItem">
								<div class="numName">运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.oxygen_machine_2_run_flag ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem">
								<div class="numName">2#仪表风压力</div>
								<div class="num">{{showList.oxygen_machine_2_run_flag}} <span class="unit">Mpa</span></div>
							</div>
							<div class="numItem">
								<div class="numName">2#氧气纯度</div>
								<div class="num">{{showList.oxygen_machine_2_oxygen_purity}} <span class="unit">mg/L</span></div>
							</div>
							<div class="numItem">
								<div class="numName">2#产品罐压力</div>
								<div class="num">{{showList.oxygen_machine_2_product_tank_pressure}} <span class="unit">Mpa</span></div>
							</div>
							<div class="numItem">
								<div class="numName">2#冷却后温度</div>
								<div class="num">{{showList.oxygen_machine_2_cooled_temp}} <span class="unit">℃</span></div>
							</div>
							<div class="numItem">
								<div class="numName">2#流量</div>
								<div class="num">{{showList.oxygen_machine_2_flow_rate}} <span class="unit">Nm³/h</span></div>
							</div>
							<div class="numItem">
								<div class="numName">2#增压机</div>
								<div class="num">
									<div class="cirle" :class="[showList.oxygen_machine_2_boost_status ?  'green':'red' ]"></div>
								</div>
							</div>


						</div>

					</div>
					<div class="item">
						<div class="itemName">3#制氧机 </div>
						<div class="numBox">
							<div class="numItem">
								<div class="numName">运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.oxygen_generation_3_status ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem">
								<div class="numName">3#氧气纯度</div>
								<div class="num">{{showList.oxygen_purity_percentage}} <span class="unit">mg/L</span></div>
							</div>
							<!-- <div class="numItem">
								<div class="numName">3#产品压力</div>
								<div class="num"> <span class="unit">Mpa</span></div>
							</div> -->
							<div class="numItem">
								<div class="numName">3#流量</div>
								<div class="num">{{showList.oxygen_machine_3_flow_rate}} <span class="unit">Nm³/h</span></div>
							</div>
							<div class="numItem">
								<div class="numName">冷干机状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.dryer_status ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem">
								<div class="numName">加热器状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.heater_run ? 'green' : 'red']"></div>
								</div>
							</div>

							<div class="numItem">
								<div class="numName">加热器故障状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.heater_fault ? 'green' : 'red']"></div>
								</div>
							</div>


						</div>
					</div>
					<div class="item">
						<div class="itemName">3/4#空压机 </div>
						<div class="numBox">
							<div class="numItem">
								<div class="numName">3#运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.oxygen_machine_3_compressor_status ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem">
								<div class="numName">3#供气压力</div>
								<div class="num">{{showList.oxygen_machine_3_supply_pressure}} <span class="unit">Mpa</span></div>
							</div>
							<div class="numItem">
								<div class="numName">3#排气温度</div>
								<div class="num">{{showList.oxygen_machine_3_exhaust_temp}} <span class="unit">℃</span></div>
							</div>
							<div class="numItem">
								<div class="numName">4#运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.oxygen_machine_4_status ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem">
								<div class="numName">4#供气压力</div>
								<div class="num">{{showList.oxygen_machine_4_supply_pressure}} <span class="unit">Mpa</span></div>
							</div>
							<div class="numItem">
								<div class="numName">4#排气温度</div>
								<div class="num">{{showList.oxygen_machine_4_exhaust_temp}} <span class="unit">℃</span></div>
							</div>



						</div>
					</div>
					<div class="item">
						<div class="itemName">1_4#制冷机 </div>
						<div class="numBox">
							<div class="numItem status">
								<div class="numName">1#运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_1_run ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem status">
								<div class="numName">1#故障状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_1_fault ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem status">
								<div class="numName">2#运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_2_run ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem status">
								<div class="numName">2#故障状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_2_fault ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem status">
								<div class="numName">3#运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_3_run ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem status">
								<div class="numName">3#故障状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_3_fault ? 'green' : 'red']"></div>
								</div>
							</div>
							<div class="numItem status">
								<div class="numName">4#运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_4_run ? 'green' : 'red']"></div>
								</div>
							</div>

							<div class="numItem status">
								<div class="numName">4#故障状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.refrigeration_machine_4_fault ? 'green' : 'red']"></div>
								</div>
							</div>


						</div>
					</div>
					<div class="item">
						<div class="itemName">1#循环泵 </div>
						<div class="numBox">

							<div class="numItem">
								<div class="numName">设定频率</div>
								<div class="num">{{showList.pump_1_set_frequency}} <span class="unit">Hz</span></div>
							</div>
							<div class="numItem">
								<div class="numName">运行频率</div>
								<div class="num">{{showList.pump_1_run_frequency}} <span class="unit">Hz</span></div>
							</div>
							<div class="numItem">
								<div class="numName">母线电压</div>
								<div class="num">{{showList.pump_1_bus_voltage}} <span class="unit">V</span></div>
							</div>
							<div class="numItem">
								<div class="numName">输出电压</div>
								<div class="num">{{showList.pump_1_output_voltage}} <span class="unit">V</span></div>
							</div>
							<div class="numItem">
								<div class="numName">输出电流</div>
								<div class="num">{{showList.pump_1_output_current}} <span class="unit">A</span></div>
							</div>
							<div class="numItem">
								<div class="numName">输出功率</div>
								<div class="num">{{showList.pump_1_output_power}} <span class="unit">Kw</span></div>
							</div>
							<div class="numItem">
								<div class="numName">运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.pump_1_stop ? 'red' : 'green']"></div>
								</div>
							</div>


						</div>
					</div>
					<div class="item">
						<div class="itemName">2#循环泵 </div>
						<div class="numBox">

							<div class="numItem">
								<div class="numName">设定频率</div>
								<div class="num">{{showList.pump_2_set_frequency}} <span class="unit">Hz</span></div>
							</div>
							<div class="numItem">
								<div class="numName">运行频率</div>
								<div class="num">{{showList.pump_2_run_frequency}} <span class="unit">Hz</span></div>
							</div>
							<div class="numItem">
								<div class="numName">母线电压</div>
								<div class="num">{{showList.pump_2_bus_voltage}} <span class="unit">V</span></div>
							</div>
							<div class="numItem">
								<div class="numName">输出电压</div>
								<div class="num">{{showList.pump_2_output_voltage}} <span class="unit">V</span></div>
							</div>
							<div class="numItem">
								<div class="numName">输出电流</div>
								<div class="num">{{showList.pump_2_output_current}} <span class="unit">A</span></div>
							</div>
							<div class="numItem">
								<div class="numName">输出功率</div>
								<div class="num">{{showList.pump_2_output_power}} <span class="unit">Kw</span></div>
							</div>
							<div class="numItem">
								<div class="numName">运行状态</div>
								<div class="num">
									<div class="cirle" :class="[showList.pump_2_stop ? 'red' : 'green']"></div>
								</div>
							</div>


						</div>
					</div>

				</div>

			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		getCurrentInstance,
		computed
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance()
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const showList = ref({

	})
	const getList = () => {
		return new Promise(async (resolve, reject) => {
			try {
				proxy.$request.getList({tableId:'53'}).then((res) => {
					if (res.data.code === 200) {
						showList.value=res.data.result
					} else {

						ElMessage.error(res.data.message)
					}
				}).catch((err => {
					console.log('err', err)
					ElMessage.error(err)
				}))
			} catch (err) {
				console.log('err', err)



			}

		})
	}

	let intervalId = null;
	onMounted(() => {
		getList()
		intervalId = setInterval(() => {

			getList()

		}, 1000 * 2);
	})

	onBeforeUnmount(() => {
		if (intervalId) {
			clearInterval(intervalId);
		}
	})


	const goBack = (() => {
		router.push('/')
	})
</script>

<style lang="scss" scoped>
	.ozonizerBox {


		.titleBox {
			width: 100%;
			height: 60px;
			margin-bottom: 50px;

			.btnbox {
				padding: 12px 20px;
				box-sizing: border-box;
			}

			.title {
				width: 100%;
				line-height: 60px;
				text-align: center;
				font-size: 24px;
				font-weight: 400;
				text-decoration: underline;
			}


		}

		.bottomBox {
			padding: 0 50px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 700px;

			&_left {
				width: 30%;
				padding: 8px;
				box-sizing: border-box;

				.ow {
					width: 100%;
					height: 400px;
					display: flex;

					&_left {
						width: 50%;
						border: 1px solid #ccc;
						margin-right: -1px;

						.titleName {
							font-size: 16px;
							height: 30px;
							line-height: 30px;
							width: 100%;
							border-bottom: 1px solid #ccc;
							text-align: center;
							background-color: #92b478;

						}

						.listbox {
							padding: 30px 20px;
							box-sizing: border-box;
							width: 100%;
							height: 370px;
							background-color: #e2dccc;

							.item {
								display: flex;
								justify-content: space-between;
								margin-bottom: 8px;

								.itemName {
									font-size: 17px;

								}

								.itemNum {
									font-size: 14px;

									.unit {
										margin-left: 8px;
									}
								}

							}
						}
					}

					&_right {
						width: 50%;
						border: 1px solid #ccc;
						box-sizing: border-box;

						.titleName {
							font-size: 16px;
							height: 30px;
							line-height: 30px;
							width: 100%;
							border-bottom: 1px solid #ccc;
							text-align: center;
							background-color: #92b478;
						}

						.listbox {
							padding: 30px 20px;
							box-sizing: border-box;
							width: 100%;
							height: 370px;
							background-color: #e2dccc;

							.item {
								display: flex;
								justify-content: space-between;
								margin-bottom: 8px;

								.itemName {
									font-size: 17px;

								}

								.itemNum {
									font-size: 14px;

									.unit {
										margin-left: 8px;
									}
								}

							}
						}
					}


				}

				.thr {
					width: 100%;
					height: 300px;
					border: 1px solid #ccc;
					box-sizing: border-box;

					.titleName {
						font-size: 16px;
						height: 30px;
						line-height: 30px;
						width: 100%;
						border-bottom: 1px solid #ccc;
						text-align: center;
						background-color: #92b478;
					}

					.listbox {
						padding: 30px 20px;
						box-sizing: border-box;
						width: 100%;
						height: 270px;
						background-color: #e2dccc;
						display: flex;
						flex-wrap: wrap;

						.item {

							display: flex;
							flex: 50%;

							// margin-bottom: 8px;
							.itemName {
								width: 80px;
								font-size: 17px;

							}

							.itemNum {

								width: 45%;



								margin-left: 60px;
								font-size: 14px;

								.unit {
									margin-left: 4px;
								}
							}

						}


					}



				}

			}

			&_right {
				width: 70%;
				padding: 8px 20px;
				box-sizing: border-box;

				.itemBox {
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 24%;
						height: 345px;
						background-color: #e9e7da;
						margin-bottom: 15px;
						border: 1px solid #ccc;
						box-sizing: border-box;

						.itemName {
							width: 100%;
							height: 30px;
							line-height: 30px;
							text-align: center;
							font-size: 16px;
							background-color: #87c5b8;
						}

						.numBox {
							padding: 30px 20px;
							box-sizing: border-box;

							.numItem {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-bottom: 14px;

								.numName {
									font-size: 17px;

								}

								.num {
									.cirle {
										width: 25px;
										height: 25px;
										border-radius: 50%;
										border: 1px solid #ccc;

									}

									.red {
										background: linear-gradient(45deg, #bf571a, #be872d, #bf571a, );
									}

									.green {
										background: linear-gradient(45deg, #437401, #a9cd21, #437401, );
									}

									.unit {
										margin-left: 12px;
									}
								}
							}

						}


					}

					.status {
						margin-bottom: 5px !important;
					}

					.item:not(:nth-child(4n)) {
						margin-right: calc(4% / 3);

					}
				}





			}

		}
	}
</style>